@use 'variables';
@use 'sass:math';

body,
#app,
#my-app {
  height: 100%;
  overflow: hidden;
}

body {
  background-color: #f7f9fa;
  -webkit-font-smoothing: antialiased;
  // Prevent font enlargement in horizontal screen
  text-size-adjust: 100%;
  font-family: sans-serif, Roboto, sans-serif-medium, Arial;
  font-feature-settings: normal;
  color: variables.$main-text-color;
  font-size: 14px;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 4px;
    border: none;
    background: rgb(89, 89, 89);
  }
}
$base-color: #2e424e; // 基础颜色
$steps: 100; // 设定步数，从1到0，每次减少0.01需要100步
@function generate-gradient($color, $steps) {
  $result: '';
  $alpha: 1; // 初始透明度为1
  @for $i from 1 through $steps {
    $result: $result + rgba($color, $alpha) + if($i < $steps, ',', '');
    $alpha: $alpha - 0.01; // 每次循环透明度减少0.01
  }
  @return $result;
}


// 定义变量以存储颜色和尺寸
$border-gradient: linear-gradient(to bottom, #ffffff 16.11%, #d6d6d6 50.88%, #979797);
$background-gradient: linear-gradient(to top, #0d78af 0%, #003d5e 7%, #050f14 43.36%, #4b84d6 100%);
$hover-gradient: linear-gradient(to top, #1d88bf 0%, #104d6e 7%, #151f24 43.36%, #5b94e6 100%);
$active-focus-gradient: linear-gradient(to top, #2d98cf 0%, #205d7e 7%, #252f34 43.36%, #6ba4f6 100%);
// $active-focus-gradient:  red;
.svg-button {
  border-radius: 4px;
  border: 1px solid #ffffff80;
  cursor: pointer;
  text-align: center;
  background: $background-gradient;
  transition:
    filter 0.3s ease,
    background 0.3s ease;
  padding: vh(6) vw(10) !important;
  // &:hover {
  //   background: $hover-gradient;
  // }

  &:active {
    background: $active-focus-gradient;
    box-shadow: 0 0 4px #eee;
  }

  &:active:not(:hover),
  &:focus:not(:hover) {
    background: $background-gradient;
  }
}
body {
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;

  input:-webkit-autofill {
    -webkit-transition:
      color 99999s ease-out,
      background-color 99999s ease-out;
  }
}
// 页面的内容高度
$topHeight: vh(90);
$containerHeight: calc(100% - #{$topHeight});
$visualizationColor: #fff;
$visualizationCardBg: #222;
$visualizationBg: #000;

$MapSidebarWidth: vw(90); // 侧边栏宽度
$MapContainerWidth: vw(370); // 船只列表的宽度
$moveWidth: $MapContainerWidth + $MapSidebarWidth; // 移动的宽度
input::-webkit-input-placeholder {
  /* placeholder颜色 */
  color: #aab2bd !important;
  /* placeholder字体大小 */
  font-size: px2font(14) !important;
}
